<template>
  <view class="page goods">
    <swiper class="g-banner" indicator-dots indicator-active-color="#db187c" autoplay>
      <swiper-item class="b-item" v-for="(item, i) in []" :key="i">
        <view class="b-item__inner">
          <ljf-img-loader @tap="previewImage(item)" :src="item"></ljf-img-loader>
        </view>
      </swiper-item>
    </swiper>
    <view class="g-base-info">
      <view class="i-amount">￥{{infoGet('goods.amountCost',0)}}</view>
      <view class="i-title">{{infoGet('goods.title')}}</view>
      <view class="i-description">{{infoGet('goods.description')}}</view>
    </view>
    <view class="g-specs" @tap="popup.attr.isShow = true">
      <view class="s-left">规格</view>
      <view class="s-tag">颜色(2种)</view>
      <view class="s-tag">尺码(2种)</view>
      <view class="s-right">
        <view class="r-text">查看更多</view>
        <text class="s-icon iconfont">&#xe641;</text>
      </view>
    </view>
    <view class="g-content">
      <text class="g-content_title">商品参数</text>
      <!-- <uParse :content="infoGet('goods.')" :noData="noData"></uParse> -->
    </view>
    <view class="g-btm" :class="{ active: isCompatibility }">
      <button type="default" open-type="contact" class="btn">
        <view class="iconfont icon">&#xe624;</view>
        <view class="b-text">联系客服</view>
      </button>
      <button type="default" open-type="share" class="btn">
        <view class="iconfont icon">&#xe684;</view>
        <view class="b-text">分享</view>
      </button>
      <view class="g-btm_add" @tap="isPopupShow = true">立即兑换</view>
    </view>
    <ljf-goods-popup :show="isPopupShow" :goods="infoGet('goods',{})" @close="isPopupShow = false"></ljf-goods-popup>
  </view>
</template>

<script>
import mixinPageInfo from "@/mixins/type/pageInfo";
import uParse from "@/components/gaoyia-parse/parse";

import { model } from "@/model";

const { PageBo } = model.collection;

export default {
  components: {
    uParse
  },
  mixins: [mixinPageInfo],
  data () {
    return {
      PAGE_CONFIG: {
        key: "goods",
        reqData: {
          query: {
            id: 0
          }
        }
      },
      noData: '<div style="color: red;text-align:center;">~暂无相关商品详情~</div>',
      isPopupShow: false
    };
  },
  onLoad (params) {
    this.PAGE_CONFIG.reqData.query.id = +params.id;
    this._boot();
    uni.showShareMenu({
      withShareTicket: true,
      menus: ["shareAppMessage", "shareTimeline"],
    });
  },
  computed: {
    isCompatibility () {
      return this.getSystemInfo();
    }
  },
  methods: {
    previewImage (image) {
      let imgArr = [];
      imgArr.push("https:" + image);
      uni.previewImage({
        urls: imgArr,
        current: imgArr[0],
        longPressActions: {
          itemList: ["发送给朋友", "保存图片", "收藏"],
          success: function (data) { },
          fail: function (err) { },
        }
      });
    }
  },
};
</script>

<style lang="less">
.goods {
  padding-bottom: 150rpx;

  .g-banner {
    height: 750rpx;
    background: #7f7f7f;

    .b-item {
      &__inner {
        display: flex;
        height: 750rpx;

        .axq-img {
          width: 100vw;
          height: 750rpx;
        }
      }
    }
  }

  .g-base-info {
    padding: @box-gap;
    background: #fff;
    box-sizing: border-box;
    .i-amount {
      font-size: 48rpx;
      font-weight: bold;
      color: #ff0000;
    }
    .i-title {
      margin: 20rpx 0;
      font-size: 36rpx;
      font-weight: 800;
      color: #333;
    }
    .i-description {
      font-size: 30rpx;
      font-weight: 500;
      color: #999;
    }
  }

  .g-specs {
    .layout_flex(@j:space-between);
    padding: @box-gap;
    margin: 30rpx 0;
    background: #fff;
    box-sizing: border-box;

    .s-left {
      font-size: 32rpx;
      font-weight: bold;
      color: #343434;
    }

    .s-tag {
      width: 180rpx;
      height: 50rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #333;
      text-align: center;
      line-height: 50rpx;
      background: #f5f5f5;
      border-radius: 4rpx;
    }

    .s-right {
      display: flex;
      align-items: center;
      color: #666;

      .r-text {
        height: 50rpx;
        line-height: 50rpx;
        font-size: 26rpx;
        font-weight: 500;
      }

      text {
        font-size: 38rpx;
      }
    }
  }

  .g-content {
    padding-bottom: 30rpx;
    background: #fff;
    &_title {
      height: 90rpx;
      padding-left: 30rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #343434;
      line-height: 90rpx;
    }
  }

  .g-btm {
    .layout_flex();
    position: fixed;
    bottom: 0;
    z-index: 99;
    width: 100vw;
    height: 100rpx;
    padding: 15rpx 30rpx;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 5rpx 10rpx 2rpx #1d1414;

    .b-img {
      display: block;
      width: 36rpx;
      height: 36rpx;
    }

    .btn {
      .layout_flex(@j: center, @d:column);
      width: 120rpx;
      height: 80rpx;
      font-size: 30rpx;
      line-height: 40rpx;
      color: #999;
      background: transparent;
      border: none;

      &::after {
        border-color: transparent;
      }

      .icon {
        width: 100%;
        font-size: 35rpx;
        color: #ff4527;
      }

      .b-text {
        width: 120rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #333;
      }
    }

    &_add {
      .layout_flex(@j: center);
      width: 446rpx;
      height: 90rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #fff;
      background: linear-gradient(90deg, #ff7003, #ff382f);
      border-radius: 45rpx;
    }
  }

  .active {
    height: 150rpx;
    padding-bottom: 60rpx;
  }
  .popup-main {
    .layout_flex(@d:column);
    width: 100vw;
    height: 85vh;
    padding: 0 30rpx;
    box-sizing: border-box;

    .m-header {
      .layout_flex(@j:space-between);
      width: 100%;
      height: 180rpx;
      padding: 20rpx 0;

      .h-left {
        width: 180rpx;
        height: 180rpx;
        margin-right: 30rpx;

        image {
          border-radius: 15rpx;
        }
      }

      .h-right {
        flex: 1;
        .r-title {
          width: 400rpx;
          margin-bottom: 30rpx;
          font-size: 34rpx;
          font-weight: bold;
          color: #333;
        }
        .r-description {
          font-size: 30rpx;
          font-weight: 500;
          color: #999;
        }
        .r-amount {
          font-size: 48rpx;
          font-weight: bold;
          color: #ff0000;
        }
      }
    }
    .m-body {
      flex: 1;
      width: 100%;
      overflow-y: auto;
      .b-title {
        width: 100%;
        margin: 20rpx 0;
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
      .b-list {
        width: 100%;
        .layout_flex();
        flex-wrap: wrap;
        .l-item {
          .layout_flex(@j:center);
          width: 140rpx;
          height: 60rpx;
          margin: 0 20rpx 20rpx 0;
          font-size: 30rpx;
          font-weight: 500;
          color: #666;
          border: 1px solid #666666;
          border-radius: 30rpx;
          &--active {
            color: #fff;
            background: linear-gradient(90deg, #ff7003, #ff382f);
            border: none;
          }
        }
      }
    }
    .m-counter {
      .layout_flex(@j:space-between);
      width: 100%;
      height: 120rpx;
      border-top: 1rpx solid #e6e6e6;
      border-bottom: 1rpx solid #e6e6e6;
      &_left {
        .layout_flex();
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        text {
          font-size: 28rpx;
          font-weight: 400;
          color: #999;
        }
      }
    }
    .m-footer {
      .layout_flex(@j:space-around);
      width: 100%;
      height: 108rpx;

      .f-btn {
        .layout_flex(@j:center);
        width: 690rpx;
        height: 80rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #fff;
        background: linear-gradient(90deg, #ff7003, #ff382f);
        border-radius: 40rpx;
        opacity: 0.5;
        &--active {
          opacity: 1;
        }
      }
    }
  }
}

/deep/ u-parse {
  .wxParse {
    .img {
      display: block;
    }
  }
}
</style>